body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	overscroll-behavior: none;
}

#jia-zai {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(50, 50, 100, 1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 100;
	user-select: none;
	cursor: pointer;
}
progress {
	width: 200px;
	height: 20px;
}
.xuan-zhuan {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 10px solid #aaaaff;
	border-top: 10px solid transparent;
	animation: zhuan .5s linear infinite;
}
@keyframes zhuan{
	from{transform: rotate(0);}
	to{transform: rotate(360deg)}
}

.ti-shi-1 {
	display: block;
}

.ti-shi-2 {
	display: none;
}

#blocker {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(50, 50, 100, 0.7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	z-index: 1;
	user-select: none;
	cursor: pointer;
}

#container {
	position: absolute;
	top: 0;
	z-index: 1;
}

#jie-mian {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#kong-zhi {
	display: none;
}

a,
button,
input,
select {
	pointer-events: auto;
}

@media all and (max-width: 800px) {
	
	body {
		transform-origin: left top;
		transform: translateX(100vw) rotate(90deg);
		width: 100vh;
		height: 100vw;
	}
	.ti-shi-1 {
		display: none;
	}
	
	.ti-shi-2 {
		display: block;
	}
	
	#blocker {
		display: none;
	}
	
	#kong-zhi {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 5;
		top: 0;
	}

	#yi-dong {
		width: 150px;
		height: 150px;
		position: absolute;
		bottom: 80px;
		left: 70px;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.4);
		background-color: rgba(255, 255, 255, 0.2);
	}
	
	#yao-gan {
		width: 50px;
		height: 50px;
		position: relative;
		top: 75px;
		left: 75px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.8);
	}

	/* #yi-dong {
		position: absolute;
		bottom: 20px;
		left: 20px;
		width: 200px;
		height: 200px;
		padding: 10px;
		display: grid;
		grid-template-columns: repeat(3, 33.33%);
		grid-template-rows: repeat(3, 33.33%);
		user-select: none;
		z-index: 10;
	} */
	
/* 	#yi-dong div {
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.5);
	}

	#yi-dong div:nth-child(1) {
		grid-column-start: 2;
		grid-column-end: 3;
	}

	#yi-dong div:nth-child(2) {
		grid-column-start: 1;
		grid-column-end: 2;
	}

	#yi-dong div:nth-child(3) {
		grid-column-start: 3;
		grid-column-end: 4;
	}

	#yi-dong div:nth-child(4) {
		grid-column-start: 2;
		grid-column-end: 3;
	} */

	#shi-jiao {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 50vh;
		height: 100vw;
		z-index: 10;
	}
	
	.ju-zhong {
		display: flex;
		justify-content: center;
		align-items: center;
		user-select: none;
		background-color: rgba(255, 255, 255, 0.7);
	}
	
	#da-ji {
		position: absolute;
		bottom: 140px;
		right: 80px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		z-index: 20;
	}
	
	#miao-zhun {
		position: absolute;
		bottom: 70px;
		right: 80px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		z-index: 20;
	}
	
	#tiao {
		position: absolute;
		bottom: 50px;
		right: 150px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		z-index: 20;
	}	
}
